<template>
    <div class="file-upload">
        <input type="file" @change="handlerFile">
        <img :src="value" alt="">
        <slot :src="value">
        </slot>
    </div>
</template>

<script>

    export default {
        name: "avatar-file",
        props: {
            value: String
        },
        data() {
            return {}
        },
        methods: {
            async handlerFile(e) {
                const file = e.target.files[0]
                try {
                    let {data} = await this.$api.uploadFile(file)
                    this.$emit('input', data.url)
                    e.target.value = ''
                } catch (e) {
                    console.log(e)
                }
            }
        }
    }
</script>
<style lang="scss">
    .file-upload {
        position: relative;
        overflow: hidden;

        input {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            opacity: 0;
            z-index: 2;
        }
    }
</style>
